<template>
  <view>
<!--    &lt;!&ndash; 顶部导航栏 &ndash;&gt;-->
<!--    <u-navbar title="我的" :is-back="false">-->
<!--    </u-navbar>-->

    <view class="personal">
      <view class="personal-main">
        <u-avatar :src="user.avatar" mode="square" size="120" class="u-avatar"></u-avatar>
        <view class="personal-info">
          <view class="">{{user.nickname}}</view>
          <view class="org-name">{{user.organizationName}}</view>
        </view>
      </view>
      <!--			<u-icon name="arrow-right" size="30" class="p-right-icon"></u-icon>-->
    </view>
    <view style="width: 100%;margin-left: auto;margin-right:auto;margin-top: 40rpx;background-color: white;border-radius: 20rpx;padding: 30rpx">
      <uni-card title="我的订单" :isFull="true"  extra="全部订单">
        <view slot="actions" class="card-actions">
          <u-grid
              :border="false"
              col="4"
          >
            <u-grid-item
                v-for="(listItem,listIndex) in orderOperations"
                :key="listIndex"
                @click="orderOperationsClick(listItem)"
            >
              <u-image  :src="listItem.url" width="40px" height="40px"></u-image>
              <text class="text">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>

        </view>
      </uni-card>


    </view>

    <view style="width: 100%;margin-left: auto;margin-right:auto;margin-top: 40rpx;background-color: white;border-radius: 20rpx;padding: 30rpx">
      <u-grid
          :border="false"
          col="4"
      >
        <u-grid-item
            v-for="(listItem,listIndex) in options"
            :key="listIndex"
            @click="clickItem(listItem)"
        >
          <u-image  :src="listItem.url" width="40px" height="40px"></u-image>
          <text class="text">{{ listItem.title }}</text>
        </u-grid-item>
      </u-grid>

    </view>


<!--    <u-image  src="/static/images/buyer/mine/wPay.png" width="40px" height="40px"></u-image>-->
    <view class="fix-bottom" style="width: 100%"  @click="logOut">
      <button type="warn">退出登录</button>
    </view>


  </view>
</template>

<script>
import {NetWork} from "../../../api/buyer/common";

export default {
  name:"index",
  data() {
    return {
      currentPage:'/pages/public/mine/index',
      // userRole:uni.getStorageSync('userInfo').userType,
      user: {},
      orderOperations:[
        {
          url:"/static/images/buyer/mine/wPay.png",
          title:"待付款",
        },
        {
          url:"/static/images/buyer/mine/wShip.png",
          title:"待发货",
        },
        {
          url:"/static/images/buyer/mine/wReceipt.png",
          title:"待收货",
        },
        {
          url:"/static/images/buyer/mine/wEvaluated.png",
          title:"待评价",
        },
      ],
      options:[
        {
          url:"/static/images/buyer/mine/collect.png",
          title:"收藏",
        },
        {
          url:"/static/images/buyer/mine/focusOn.png",
          title:"关注",
        },
        {
          url:"/static/images/buyer/mine/coupon.png",
          title:"优惠券",
        },
        {
          url:"/static/images/buyer/mine/member.png",
          title:"会员",
        },
        {
          url:"/static/images/buyer/mine/harvestAddress.png",
          title:"收获地址",
        },
      ]
    }
  },

  created(){
    if(NetWork.checkIsLogin()){
      this.init()
    }
  },
  mounted(){
    uni.$off('pulldownRefresh');
    uni.stopPullDownRefresh()
  },
  methods: {
    isShow(item){
      if(item.userTypes==undefined){
        return true;
      }
      if(item.userTypes.indexOf(this.userRole)!=-1){
        return true;
      }
      return false;
    },
    // 初始化个人信息
    init() {
      if (uni.getStorageSync('userInfo')) {
        //已登录
        this.user = uni.getStorageSync('userInfo');
        this.user.organizationName=this.global_dataformat(this.user.organizationName)
        if (this.user.avatar===null){
          this.user.avatar='https://cdn.eleadmin.com/20200610/avatar.jpg'
        }
      } else {
        //未登录
        this.user = {};
      }
    },

    /*退出登录*/
    logOut(){
      //清除登录信息
      this.user={};
      //清空token，userInfo，tabList
      uni.setStorageSync('token', null);
      uni.setStorageSync('userInfo',null);
      uni.setStorageSync('tabList',null);
      try {
        this.$store.state.socket.closeWebSocket();
      }catch (e) {
        console.log(e)
      }
      this.$store.dispatch("SET_SOCKET",null);

      uni.showToast({
        title: '退出登录成功',
        icon: 'none'
      });
      //退出后跳转至登录页
      uni.redirectTo({
        url:"/pages/public/login/login",
        success:res =>{
        },
        fail:() =>{
        },
        complete:() => {
        }
      });
      //成功后延迟半秒跳转
      // setTimeout(() => {
      //
      // }, 500);
    },
    global_dataformat(data){
      return (data==undefined||data==null)?'':data;
    },
    toAddress(){
      uni.navigateTo({
        url: '/pages/buyer/public/Address',
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    },
    clickItem(item){
      switch (item.title) {
        case "收获地址":
          this.toAddress()
              break;
        default:
          uni.showToast({
            title: `该功能未实现`
          })

      }
    },
    orderOperationsClick(listItem){
      let info={
        status:listItem.title
      }
      uni.navigateTo({
        url: '/pages/buyer/public/Order/OrderList?info='+encodeURIComponent(JSON.stringify(info)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    }
  }
}
</script>

<style>

page {
  background-color: #fafafa;
}
.personal {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0 40rpx 30rpx;
}

.personal-main {
  display: flex;
  align-items: center;
}

.personal-info {
  display: flex;
  flex-direction: column;
}

.org-name{
  font-size: 20rpx;
}

.u-avatar {
  margin-right: 30rpx;
}

.navbar-right {
  padding: 0 40rpx;
}

.navbar-right-icon {
  margin-left: 50rpx;
}

.hover-class {
  background-color: #efefef;
}

.n-p {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.p-right-icon {
  padding: 0 40rpx;
}

.p-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  padding: 10rpx;
  margin: 20rpx;
  color: #FFFFFF;
  border-radius: 10rpx;

}

.p-right {
  height:90rpx;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-right-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-right-main-name {
  font-size: 36rpx;
  font-weight: 500;
}

.p-right-main-time {
  margin-right: 20rpx;
  font-size: 24rpx;
  color: #9d9d9d;
}

.logout{
  height:90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  color: red;
}
</style>
